{{ $ := .root }}
{{ $page := .page }}

<div class="row page-header">
    {{ with $page.Title }}
    <div class="title row col-md-12 justify-content-center">
        <h1>{{ . | markdownify | emojify }}</h1>
    {{ end }}
    <div class="row col-md-12 justify-content-center section-heading">
        {{ if $page.Params.subtitle }}<p>{{ $page.Params.subtitle | markdownify | emojify }}</p>{{ end }}
    </div>
    </div>
    {{ with $page.Params.feature }}
    <div class="features row col-md-12 justify-content-center position-relative">
        {{ range sort $page.Params.feature "weight"}}
        {{ $pack := or .icon_pack "fas" }}
        {{ $pack_prefix := $pack }}
        {{ if in (slice "fab" "fas" "far" "fal") $pack }}
            {{ $pack_prefix = "fa" }}
        {{ end }}
        {{ $col_md := "4" }}
        {{ with .col_md }}
          {{ $col_md = . }}
        {{ end }}
        <div class="feature col-12 col-lg-{{ $col_md }} mb-4 position-relative">
            {{ if or .banner_title .banner_subtitle }}
              <div class="banner {{if .banner_mosaic_color}}mosaic-{{.banner_mosaic_color}}{{end}}">
                {{ if .banner_subtitle }}
                  <span class="subtitle">{{ .banner_subtitle }}</span>
                {{ end }}
                {{ if .banner_title }}
                  <span class="title {{ if not .banner_subtitle }}no-subtitle{{ end }}">{{ .banner_title }}</span>
                {{ end }}
              </div>
            {{ end }}
            <div class="feature-inner pt-3 pb-3 {{ if and .link_title .link_url .link_feature }}is-linked-feature{{end}} {{if or .banner_title .banner_subtitle}}has-banner{{end}}">
              {{ if and (and .link_title .link_feature) (or .link_url .link_email) }}
              <a href="{{ .link_url | safeHTMLAttr | relURL }}" title="{{ .link_title | safeHTMLAttr }}" class="linked-feature">
              {{ end }}
                {{ if .title }}
                <h2 class="mosaic-card-title">{{ .title | markdownify | emojify }}</h2>
                {{ end }}

                {{ with .image }}
                  {{ if $page.Params.feature_image_height }}
                    <div class="image mb-2 images-with-same-height" style="height:{{ $page.Params.feature_image_height }};background-image: url({{ . | safeHTMLAttr | relURL }});"></div>
                  {{ else }}
                    <img src="{{ . | safeHTMLAttr | relURL }}" />
                  {{ end }}
                {{ end }}

                {{ if .subtitle }}
                <h3 class="mosaic-card-subtitle">{{ .subtitle | markdownify | emojify }}</h3>
                {{ end }}

                {{ with .icon_card }}
                <div class="image">
                    <img src="{{ printf "img/%s"  $page.Params.icon_card | markdownify | emojify | relURL }}">
                </div>
                {{ end }}
                {{ with .description }}<p class="desc">{{ . | markdownify | emojify }}</p>{{ end }}
                {{ with .content }}<div class="content">{{ . | markdownify | emojify }}</div>{{ end }}
                {{ if and .link_title (or .link_url .link_email) }}
                  {{ $link := "" }}
                  {{ if .link_url }}
                    {{ $link = .link_url | relURL }}
                  {{ end }}
                  {{ if .link_email }}
                    {{ $link = printf "mailto:%s" .link_email }}
                  {{ end }}
                  <div class="buttons justify-content-center">
                      <a class="mosaic-btn mosaic-btn-primary" href="{{ $link | safeHTMLAttr }}" title="{{ .title }}">{{ .link_title }}</a>
                  </div>
                {{ end }}
                {{ if and (and .link_title .link_feature) (or .link_url .link_email) }}
              </a>
              {{ end}}
            </div>
        </div>
        {{ end }}
    </div>
  {{ end }}

  {{ with $page.Content }}
  <div class="col-md-12">
    {{ . }}
  </div>
  {{ end }}

</div>

{{ if not (and $page.Params.button $page.Params.feature) }}
  <hr class="vertical-span" />
{{end}}
